<template>
  <Main :type="'form'">
    <el-form ref="form" label-width="50px">
      <el-form-item>
        <el-checkbox v-model="isCoupon">优惠劵</el-checkbox>
        <el-button
          type="primary"
          size="small"
          style="margin:0 0 10px 20px;"
          :disabled="!isCoupon"
          @click="tag"
          >选择劵</el-button
        >
        <Table :data="listData" style="width:80%;">
          <el-table-column
            label="优惠劵名称"
            align="center"
            property="title"
          ></el-table-column>
          <el-table-column label="优惠劵类型" align="center">
            <template slot-scope="scope">
              {{ scope.row.type == 0 ? "满减劵" : "折扣劵" }}
            </template>
          </el-table-column>
          <el-table-column label="有效期" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type_time === 1">
                {{ scope.row.stime }} 至 {{ scope.row.etime }}</span
              >
              <span v-else
                >领取{{ scope.row.stime }}天后生效，{{
                  scope.row.etime === 0
                    ? "永久有效"
                    : `有效期${scope.row.etime}天`
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="库存"
            align="center"
            property="stock"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="del(scope.$index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </Table>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="isIntegral">积分</el-checkbox>
        送&nbsp;&nbsp;
        <el-input-number
          v-model="integral"
          :precision="0"
          :step="1"
          :disabled="!isIntegral"
          :controls="false"
        ></el-input-number
        >&nbsp;&nbsp;积分
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="isYue">余额</el-checkbox>
        送&nbsp;&nbsp;
        <el-input-number
          v-model="yue"
          :precision="2"
          :step="1"
          :disabled="!isYue"
          :controls="false"
        ></el-input-number
        >&nbsp;&nbsp;元
      </el-form-item>
    </el-form>

    <Footer>
      <el-button type="primary" @click="submit">保 存</el-button>
    </Footer>
    <el-dialog
      title="选择优惠劵"
      :visible.sync="dialogTableVisible"
      :before-close="handleClose"
    >
      <el-table
        ref="multipleTable"
        :data="List"
        :row-key="getRowKeys"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          width="30"
          :reserve-selection="true"
          type="selection"
        ></el-table-column>
        <el-table-column
          label="优惠劵名称"
          align="center"
          property="title"
        ></el-table-column>
        <el-table-column label="优惠劵类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.type == 0 ? "满减劵" : "折扣劵" }}
          </template>
        </el-table-column>
        <el-table-column label="有效期" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type_time === 1">
              {{ scope.row.stime }} 至 {{ scope.row.etime }}</span
            >
            <span v-else
              >领取{{ scope.row.stime }}天后生效，{{
                scope.row.etime === 0
                  ? "永久有效"
                  : `有效期${scope.row.etime}天`
              }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div style="width:100%;text-align:center;margin-top:30px;">
        <el-pagination
          :page-size="8"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </Main>
</template>
<script>
import { COUPON_LIST } from "@/service/shop";
import { SETSUPPLYSETTING } from "../../service";

export default {
  data() {
    return {
      allList: [],
      getRowKeys(row) {
        return row.lg_coupon_id;
      },
      totals: 0,
      pages: 1,
      List: [],
      listData: [],
      dialogTableVisible: false,
      isCoupon: false,
      coupon: "",
      isIntegral: false,
      integral: 0,
      isYue: false,
      yue: 0
    };
  },
  created() {
    this.get();
    this.getCoupon();
  },
  methods: {
    handleSelectionChange(v) {
      this.allList = v;
    },
    del(i) {
      this.listData.splice(i, 1);
    },
    async getCoupon() {
      await COUPON_LIST({ type: 1 }).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          this.totals = data.count;
          this.List = data.list;
        } else {
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getCoupon();
    },
    tag() {
      this.dialogTableVisible = true;
      this.toggle();
    },
    handleClose() {
      this.dialogTableVisible = false;
      this.$refs.multipleTable.clearSelection();
      this.allList = [];
    },
    handleSubmit() {
      this.dialogTableVisible = false;
      this.listData = this.allList;
      this.allList = [];
    },
    toggle() {
      this.List.forEach(ele => {
        this.listData.forEach(eles => {
          if (ele.lg_coupon_id === eles.lg_coupon_id) {
            setTimeout(() => {
              this.$refs.multipleTable.toggleRowSelection(ele);
            }, 500);
          }
        });
      });
    },
    submit() {
      let arr = [];
      this.listData.forEach(ele => {
        arr.push(ele.lg_coupon_id);
      });
      let json = {
        flag: "save",
        is_coupon: this.isCoupon ? 1 : 0,
        coupon: arr.join(","),
        is_integral: this.isIntegral ? 1 : 0,
        integral: this.integral,
        is_yue: this.isYue ? 1 : 0,
        yue: this.yue
      };
      this.get(json);
    },
    async get(json) {
      await SETSUPPLYSETTING(json).then(({ code, data, msg }) => {
        if (json) {
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        } else {
          if (code === 200 && data) {
            this.coupon = data.coupon;
            this.listData = data.coupon;
            this.integral = data.integral;
            this.yue = data.yue;
            this.isCoupon = data.is_coupon === 1;
            this.isIntegral = data.is_integral === 1;
            this.isYue = data.is_yue === 1;
          } else {
            this.$message.error(msg);
          }
        }
      });
    }
  }
};
</script>
